/**
 * NavigationBar
 * @flow
 */
import React, {Component, PropTypes} from 'react';

import {
    StyleSheet,
    Image,
    Text,
    View,
    Platform,
    StatusBar,
    ViewPropTypes
} from 'react-native'

const NAV_BAR_HEIGHT_ANDROID = 50;
const NAV_BAR_HEIGHT_IOS = 44;
const STATUS_BAR_HEIGHT = 20;
const statusBarShape = {
    backgroundColor: PropTypes.string,
}

export default class NavigationBar extends Component {
    static propTypes = {
        style: ViewPropTypes.style,
        title: PropTypes.string,
        titleView: PropTypes.element,
        hide: PropTypes.bool,
        leftButton: PropTypes.element,
        rightButton: PropTypes.element,
        statusBar: PropTypes.shape(statusBarShape)
    }

    constructor(props) {
        super(props);
        this.state = {
            title: '',
        }
    }

    render() {
        let status = <View style={[styles.statusBar, this.props.statusBar]}>
            <StatusBar {...this.props.statusBar}/>
        </View>
        let titleView = this.props.titleView ? this.props.titleView :
            <Text style={styles.title}>{this.props.title}</Text>
        let content = <View style={styles.navBar}>
            {this.props.leftButton}
            <View style={styles.titleContent}>
                {titleView}
            </View>
            {this.props.rightButton}
        </View>
        return <View style={[styles.container, this.props.style]}>
            {status}
            {content}
        </View>
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'gray'
    },
    navBar: {
        justifyContent: "space-between",
        alignItems: "center",
        height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
        backgroundColor: "#271770",
        flexDirection: "row"
    },
    titleContent: {
        justifyContent: "center",
        position: "absolute",
        left: 20,
        right: 40,
        top: 0,
        bottom: 0
    },
    title: {
        fontSize:20,
        color: 'white'
    },
    statusBar: {
        height: Platform.OS === 'ios' ? STATUS_BAR_HEIGHT : 0
    }
})